<template>
  <div class="order">
    <el-card>
      <!-- 搜索组件 -->
      <!-- <search-form :items="formItems" :params="params" :on-submit="onSearch" :btn-loading="loading" /> -->

      <!-- 左上角按钮 -->
      <div class="table-left-top">
        <el-button icon="el-icon-plus" size="mini" type="primary" @click="addPop">新增客服</el-button>
      </div>

      <!-- 表格区域 -->
      <div class="table-body">
        <el-table ref="listData" style="margin-top: 10px" :data="listData">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="客服名称" />
          <el-table-column prop="phone" label="手机号码" />
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="editPop(scope.row)">编辑</el-button>
              <el-button size="mini" type="text" @click="delBtn(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 编辑或新增 -->
      <el-dialog
        v-if="dialog"
        :title="mdl.id ? '编辑角色' : '新增角色'"
        :visible.sync="dialog"
        width="500px"
        :close-on-click-modal="false"
        destroy-on-close
      >
        <form-model :mdl="mdl" :parent-id="parentId" :handle-close-drawer="handleCloseDialog" @getList="getList" />
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import SearchForm from '@/components/SearchForm'
import { getCustomerServiceList,delCustomerService } from '@/api/user'
import FormModel from './FormModel.vue'
export default {
  components: { SearchForm, FormModel },
  data() {
    return {
      params: {},
      loading: false,
      listData: [],
      mdl: {},
      parentId: 0,
      dialog: false, // 新增、编辑弹框
      query:{
        roomId:'',
        storeId:'',
      },
      condition: {
        current: 1,
        size: 20,
      },
    }
  },
  computed: {
    formItems() {
      // 状态
      const statusOptions = [
        { label: '啊啊', value: 0 },
        { label: '啊啊', value: 1 }
      ]

      // 构建搜索表单
      return [
        { title: '啊啊', type: 'input', key: 'material_name', maxlength: 30 },
        { title: '啊啊', type: 'select', key: 'status', options: statusOptions },
        { title: '啊啊', type: 'date-range', key: 'created_at' }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 删除
    delBtn(row) {
      const that = this
      that.$confirm('确认删除？')
        .then(_ => {
          delCustomerService({
            id: row.id
          }).then(res => {
            if (res.statusCode === '00000') {
              that.getList()
            }
          })
        })
        .catch(_ => {

        })
    },
    // 获取列表
    getList() {
      getCustomerServiceList().then(res => {
        if (res.statusCode === '00000') {
          this.listData = res.data
        }
      })
    },

    // 搜索按钮
    onSearch() {
      console.log(this.params)
      this.getList()
    },

    // 新增-弹窗
    addPop() {
      this.dialog = true
      this.mdl = {}
    },

    // 修改-弹窗
    editPop(item) {
      console.log(item)
      this.mdl = Object.assign({}, item)
      this.dialog = true
    },

    // 关闭dialog方法
    handleCloseDialog() {
      this.dialog = false
    }
  }
}
</script>

<style lang="scss" scoped>
.order {
  margin: 20px;
}
</style>
